
<template>
  <div id="login1">
    <div id="login2">
      <div class="header">
        <el-col style="width: 70px; height: 150px;margin:0 120px;">
          <div class="demo-basic--circle" style="margin:0 auto;">
            <div class="block">
              <el-avatar :size="70"
                         src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            </div>
          </div>
        </el-col>
        <!-- 头像 -->

      </div>
      <div v-loading="loading">
        <el-form :model="dateForm" ref="dateForm" class="demo-dateForm"
                 style="width: 200px; margin:auto;">
          <el-form-item prop="userCode" >
            <el-input placeholder="请输入账号" v-model="dateForm.userCode" style="width: 200px;"></el-input>
          </el-form-item>
          <el-form-item prop="userPassword" >
            <el-input placeholder="请输入密码" v-model="dateForm.userPassword" style="width: 200px;" show-password>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm" style="width: 200px;">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div id="login4" >
      <!-- 幻灯图片 -->
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in 6" :key="item">
          <!-- <h3 class="medium">{{ item }}</h3> -->
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>
<script>
import Axios from 'axios';

export default {
  name: 'Login',
  data() {
    return {
      dateForm: {
        userName:'',
        userPassword:''
      },
      circleUrl: '../../assets/touxiang.webp'
    }
  },
  methods: {

    submitForm() {
      let _this=this
      Axios.post("http://localhost:8081/user/login",this.dateForm).then((res=>{
            if(res.data.state==false){
              this.$message.error('登录失败请输入正确的账户和密码！');
            }else{
              localStorage.setItem('tokenkye',res.data.token)
              localStorage.setItem('userId',res.data.userId)
              localStorage.setItem('tradeId',res.data.tradeId)
              localStorage.setItem('roleId',res.data.roleId)
              // alert(localStorage.getItem('roleId'))
              _this.$router.push('/home')
            }
          }
      ))

    }
  }

}
</script>

<style>
#login1 {
  height: 100vh;
  background: url(../../assets/bej2.webp) no-repeat;
  background-size: 100%,100%;
  /* linear-gradient(to right, #999999, #330867); */
  /* padding: 0;
  margin: 0;
  height: 100vh;
  box-sizing: border-box;
  background-image: url(../../assets/e90664acbb424877adfaa40ca21cd35b.jpeg); */
}

#login2 {
  position: absolute;
  /*    background-color: bisque; */
  width: 410px;
  height: 388px;
  border-radius: 15px;
  padding: 0 50px;
  position: relative;
  left: 50%;
  top: 30%;
  background: rgba(200,200,200,0.75);
  transform: translate(-50%, -50%);
}
#login4{
  width: 700px;
  position: relative;
  left: 50%;
  bottom: -30%;
  transform: translate(-50%, -50%);
}

.header {
  text-align: center;
  line-height: 200px;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.65;

}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>